<template>
  <div>
    <Swiper></Swiper>
    <Hptop></Hptop>
    <Song></Song>
    <!-- 共用组件 -->
    <Singer :list="this.list_1" :info_list="singer"/>
    <Singer :list="this.list_2" :info_list="singer_1"/>
    <New_song></New_song>
    <!-- <Book_mv></Book_mv> -->
  </div>
</template>

<script>
import Swiper from "./swiper";
import Hptop from "./hptop";
import Song from "./hall_song";
import New_song from "./new_song";
import { mapState } from "vuex";
export default {
  data(){

    return{
      //歌手分类
      list_1:{'sort_name':'热门歌手','sort':1},
      list_2:{'sort_name':'飙升歌手','sort':2}
    }
  },
  name:'home',
  methods:{
    
  },
  components: {
    Swiper,
    Hptop,
    Song,
    // Singer,
    New_song,
    
  },
  
  mounted() {
    this.getdata(this.list_1.sort);
    this.getdata(this.list_2.sort); 
  },
  methods: {
    async getdata(index){
      await this.$store.dispatch("hall_singer",{
        sextype:0,
        sort:index,
        size:5,
        type:0
      });
    },
  },
  computed: {
    ...mapState({
      singer: (state) => state.singer.singer.info,
      singer_1: (state) => state.singer.singer_1.info,
    }),
  },
};
</script>

<style lang="less">
</style>




